// 会议详情
<template>
  <div class="page-box h100">
    <div class="display-flex DetailsMeeting-box">
      <div class="flex-1">
        <template v-for="(item, idx) in userList" :key="idx">
          <div class="user-list" v-if="item.Useid != fjs">
            <videoDemo :srcbj="item.src"></videoDemo>
            <span class="cf fz16 user-name">{{ item.userNickname }}</span>
            <img src="../../assets/img/zhibo.png" class="zhibo" />
          </div>
        </template>
      </div>
      <div class="anchor-contxt ml20">
        <template v-for="(item, idx) in userList" :key="idx">
          <div v-if="item.Useid == fjs">
            <videoDemo :srcbj="item.src"></videoDemo>
            <span class="cf fz16 user-name">{{ item.userNickname }}</span>
            <img src="../../assets/img/zhibo.png" class="zhibo" />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { ref, computed } from "vue";
import { dxget, qurl } from "../../util/index";
import videoDemo from "../../components/util/videoDemo.vue";
import dpeer from "../../store/dxPeer";
const fjs = qurl().Useid;
dpeer.commit("getUserList", qurl().id);
const userList = computed(() => {
  return dpeer.state.MultiplayerSessionList;
});
</script>
 <style scoped>
.DetailsMeeting-box {
  width: 1200px;
  margin: auto;
}
.anchor-contxt {
  width: 1000px;
  height: 790px;
  background: #000;
  position: relative;
}
.user-list {
  height: 136px;
  background: #000;
  margin-bottom: 10px;
  position: relative;
}
.user-name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 100;
}
.zhibo {
  width: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10;
}
</style>